<template>
  <div class="container">
    <div class="row">
      <h2>我的收藏</h2>
      <!--      <ul class="list-unstyled">
              <li class="media" v-for="(item,k) in favorite" :key="k">
                <img :src="prefix2+'/p'+item.video_id+'.jpg'" class="mr-3" alt="">
                <div class="media-body">
                  <h5 class="mt-0 mb-1">{{ item.video.title }}</h5>
                  <p>{{ item.video.info }}</p>
                  <span class="text-end">{{item.time}}</span>
                </div>
              </li>
      &lt;!&ndash;        <li class="media my-4">
                <img src="a" class="mr-3" alt="">
                <div class="media-body">
                  <h5 class="mt-0 mb-1">List-based media object</h5>
                  <p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage drea</p>
                </div>
              </li>
              <li class="media">
                <img src="a" class="mr-3" alt="">
                <div class="media-body">
                  <h5 class="mt-0 mb-1">List-based media object</h5>
                  <p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, afte</p>
                </div>
              </li>&ndash;&gt;
            </ul>-->
<!--      <ul class="list-unstyled d-flex">
        <li class="flex-shrink-0" v-for="(item,k) in favourites" :key="k">
          <img :src="prefix2+'/p'+item.video.cover_pic+'.jpg'" class="mr-3" alt="" style="width: 100px;height: 100px">
          <div class="flex-grow-1 ms-3">
            <h5 class="mt-0 mb-1 ">{{ item.video.title }}</h5>
            <p>{{ item.video.info }}</p>
            <span class="text-end">{{item.time}}</span>
          </div>
        </li>

        &lt;!&ndash;        <li class="media my-4">
                  <img src="a" class="mr-3" alt="">
                  <div class="media-body">
                    <h5 class="mt-0 mb-1">List-based media object</h5>
                    <p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage drea</p>
                  </div>
                </li>
                <li class="media">
                  <img src="a" class="mr-3" alt="">
                  <div class="media-body">
                    <h5 class="mt-0 mb-1">List-based media object</h5>
                    <p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, afte</p>
                  </div>
                </li>&ndash;&gt;
      </ul>-->
      <div class="container">
        <template v-for="(item,k) in favourites" :key="k">
          <div class="d-flex mb-1 me-0 ms-0 mt-3" v-if="item.video!=null" @click="playVideo(item.video.videoid,true)">
            <div class="flex-shrink-0">
              <img :src="request.pic(item.video.cover_pic)" alt="..." width="170" height="100"/>
            </div>
            <div class="flex-grow-1 ms-3">
              <h5 class="mt-0 mb-1 ">{{ item.video.title }}</h5>
              <p class="position-relative text-muted">{{ item.video.info }}<button class="position-absolute btn btn-outline-dark end-0" @click.stop="request.get('user/deleteF',{videoIds:item.video.videoid}).then(re=>{if (re)favourites.splice(k,1)})">移出收藏夹</button>
              </p>
              <span class="text-end">{{item.time.slice(0,10)}}</span>
            </div>
          </div>
          <div v-else class="d-flex mb-1 me-0 ms-0 mt-3">
            <div class="flex-shrink-0">
              <img src="../assets/invalid.jpeg" alt="..." width="170" height="100"/>
            </div>
            <div class="flex-grow-1 ms-3">
              <h5 class="mt-0 mb-1 text-muted">视频失效了</h5>
              <p class="position-relative"><button class="position-absolute btn btn-outline-dark end-0" @click.stop="request.get('user/deleteF',{videoIds:item.video_id}).then(re=>{if (re)favourites.splice(k,1)})">移出收藏夹</button>
              <br></p>
              <span class="text-end">{{item.time.slice(0,10)}}</span>
            </div>
          </div>
        </template>
        <div aria-label="Page navigation example">
          <ul class="pagination justify-content-end" >
            <li class="page-item">
              <a class="page-link">共{{page.pages}}页</a>
            </li>
            <li :class="'page-item'+(page.isFirstPage?' disabled':null)"><a class="page-link" @click="pageIndex--">上一页</a></li>
            <li v-for="i in page.navigatepageNums"
                :key="i" :class="'page-item'+(page.pageNum==i?' active':null)">
              <a class="page-link" @click="pageIndex=i">{{ i }}</a>
            </li>
            <li :class="'page-item'+(page.isLastPage?' disabled':null)"><a class="page-link" @click="pageIndex++">下一页</a></li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, inject, ref, watch} from "vue";
import request from "@/hooks/request";
import {Fav, Favorite, pageInfo, PageInfo, VideoData} from "@/types/AllData";
const prefix2=inject('prefix2')
const playVideo=inject('playVideo')
const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
// const favourites=ref<Favorite[]>([])
const page=ref<PageInfo<Favorite>>(pageInfo)
const pageIndex=ref(1)
const get=()=>{
  request.get('user/getFavorite/'+pageIndex.value).then(re=>{
    page.value=re
  })
}
get()
watch(pageIndex,get)
const favourites=computed(()=>page.value?.list)

//     .then(()=>{
//   favourites.forEach((f)=>{
//     request.get('video/play'+f.video_id).then(rep=>{
//       f.video=rep
//     })
//   })
// })

</script>

<style scoped>

</style>